<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="./detail.css">
</head>
<!-- 
    作业:
    来个抢购倒计时1小时，比方说下单时间离截至时间剩余1小时以外打6折，
    过10分钟折扣减少0.5个点(使用计算缓存)
-->

<body>
    <div>
        <div id="all">
            <h2>正在秒杀</h2><br>
            <div id="app">
                <h4>距离结束: {{hour}}:{{minute}}:{{second}}</h4>
                <!-- <div id="app2"> -->
                <img src="./img/01.jpg">
                <!-- </div> -->
                <span id="title"> Jeep吉普黑骑士智能手表4G通话上网微信电子表成人中学生手表男</span>
                <br>
                <br>
                <span>原价:</span><span id="price">￥1698.00</span>
                <br>
                <br>
                <!-- <div id="discount"> -->
                <span>限时折扣价:</span><span id="afterPrice"> ?</span>
                <!-- <span id="refresh">⟳</span> -->
                <!-- </div> -->
            </div>
        </div>
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                hours: 1,
                minutes: 0,
                seconds: 0,
            }
        },
        mounted() {
            this.add();
        },
        methods: {
            // 防止数值小于10时，出现一位数
            num(n) {
                return n < 10 ? '0' + n : '' + n
            },
            // 倒计时函数
            add() {
                let time = window.setInterval(() => {
                    if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {
                        this.hours -= 1;
                        this.minutes = 59;
                        this.seconds = 59;
                    } else if (this.hours === 0 && this.minutes !== 0 && this.seconds ===
                        0) {
                        this.minutes -= 1;
                        this.seconds = 59;
                    } else if (this.hours === 0 && this.minutes === 0 && this.seconds ===
                        0) {
                        this.seconds = 0
                        window.clearInterval(time)
                    } else if (this.hours !== 0 && this.minutes !== 0 && this.seconds ===
                        0) {
                        this.minutes -= 1;
                        this.seconds = 59;
                    } else {
                        this.seconds -= 1;
                    }
                }, 1000)
            }
        },
        watch: {
            // 监听数值变化
            second: {
                handler(newVal) {
                    this.num(newVal);
                }
            },
            minute: {
                handler(newVal) {
                    this.num(newVal);
                    //每少十分钟
                    for(let i in newVal) {
                        if(i-1) {   //后续改为10
                            let price1 = document.getElementById('price').innerHTML;    //获取原价:￥1698.00
                            let price2 = price1.split('￥')[0];  //获取1698.00
                            console.log(price2);
                            let arr = [0.65, 0.7, 0.75, 0.8,0.85]; //1103.7, 1188.6, 1273.5, 1358.4, 1443.3
                            console.log(arr);
                            for(let j in arr) {
                                console.log(arr[j]);
                                let price3 = '￥' + price2 * arr[j];
                                console.log(price3);
                                document.getElementById('afterPrice').innerHTML = price3;
                            }
                        }
                    }
                }
            },
            hour: {
                handler(newVal) {
                    this.num(newVal);

                    //小于一小时:六折
                    if (newVal < 1) {
                        let price1 = document.getElementById('price').innerHTML;    //获取原价:￥1698.00
                        let price2 = price1.split('￥')[1];  //获取1698.00
                        let price3 = document.getElementById('afterPrice').innerHTML;   //获取限时折扣价:?
                        price3 = '￥' + price2 * 0.6;        //替换限时折扣价,打6折
                        // console.log(price3);
                        document.getElementById('afterPrice').innerHTML = price3;
                    }
                }
            }
        },
        computed: {
            // 初始化数据
            second() {
                return this.num(this.seconds)
            },
            minute() {
                return this.num(this.minutes)
            },
            hour() {
                return this.num(this.hours);
            }
        }
    });

    // let app2 = new Vue({
    //     el: "#app2",
    //     data: {
    //         object: {
    //             img: "https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/180643/5/22058/104008/62454b78E119d150c/199912d8cdb00212.jpg.webp",
    //         }
    //     }
    // });

    // let discount = new Vue({
    //     el:"#discount",
    //     data: {
    //         price:'',
    //     },
    //     computer: {
    //         changePrice() {
    //         }
    //     }
    // });
</script>

</html>